<template>
  <div class="conditionUnitScreen">
    <el-table :data="tableData" border>
      <el-table-column prop="key" label="列">
        <template #default="scope">
          <el-popover placement="right-start" width="300" trigger="click" popper-class="conditionScreenPopover">
            <ul class="el-select-dropdown__list">
              <li v-for="(column, index) in columnData" :key="'column' + index" class="el-select-dropdown__item"
                :class="scope.row.key === column.name ? 'selected hover' : ''" @click="updateKey(scope, column.name)">
                <span style="float: left">{{ column.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ column.type }}</span>
              </li>
            </ul>
            <template #reference>
              <el-link type="primary">{{ scope.row.key || questionMark }}</el-link>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="value" label="值">
        <template #default="scope">
          <el-popover placement="bottom-start" width="300" trigger="click" popper-class="conditionScreenPopover"
            @show="textarea = scope.row.value">
            <div class="update-value">
              <el-input v-model="textarea" type="textarea" :rows="2" placeholder="请输入内容" />
              <div class="button-group">
                <el-button size="small" @click="updateValue()">取消</el-button>
                <el-button type="primary" size="small" @click="updateValue(scope, 'value')">确定</el-button>
              </div>
            </div>
            <template #reference>
              <el-link type="primary">{{ scope.row.value || questionMark }}</el-link>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="unit" label="单位">
        <template #default="scope">
          <el-popover placement="bottom-start" width="300" trigger="click" popper-class="conditionScreenPopover"
            @show="textarea = scope.row.unit">
            <div class="update-value">
              <el-input v-model="textarea" type="textarea" :rows="2" placeholder="请输入内容" />
              <div class="button-group">
                <el-button size="small" @click="updateValue()">取消</el-button>
                <el-button type="primary" size="small" @click="updateValue(scope, 'unit')">确定</el-button>
              </div>
            </div>
            <template #reference>
              <el-link type="primary">{{ scope.row.unit || questionMark }}</el-link>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="operator" label="运算符" width="70">
        <template #default="scope">
          <el-link type="primary" @click="updateOperator(scope)">{{ scope.row.operator }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="50">
        <template #default="scope">
          <el-button type="text" size="small" @click="deleteRow(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button class="add-row-button" type="primary" @click="addRow()">增加</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue"
import { questionMark } from 'src/utils/designerTool/constants'
const props = defineProps({
  columnData: {
    type: Array,
    default: () => {
      return []
    }
  },
  params: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const tableData = ref(<any>[])
const addIndex = ref(0)
const textarea = ref('')
const filterType = computed(() => {
  return [
    {
      key: '等于',
      value: '等于'
    },
    {
      key: '不等于',
      value: '不等于'
    },
    {
      key: '大于',
      value: '大于'
    },
    {
      key: '大于等于',
      value: '大于等于'
    },
    {
      key: '小于',
      value: '小于'
    },
    {
      key: '小于等于',
      value: '小于等于'
    }
  ]
})
onMounted(() => {
  init()
})
function init() {
  if (props.params?.data && Array.isArray(props.params.data)) {
    tableData.value = props.params.data
  }
}
function saveCommit() {
  return {
    node: tableData.value,
    form: tableData.value
  }
}
function addRow() {
  tableData.value.push({
    key: '',
    value: '',
    unit: '',
    operator: 'and'
  })
  addIndex.value++
}
function deleteRow(scope:any) {
  tableData.value.splice(scope.$index, 1)
}
function popoverClose() {
  document.body.click()
}
function updateValue(scope:any, type:any) {
  if (scope) {
    tableData.value[scope.$index].type=textarea.value
  }
  popoverClose()
  textarea.value = ''
}
function updateOperator(scope:any) {
  tableData.value[scope.$index].operator === 'and' ? 'or' : 'and'
}
function updateKey(scope:any, value:any) {
  tableData.value[scope.$index].key=value
  popoverClose()
}
</script>

<style lang="scss" scoped>
.conditionUnitScreen {
  .add-row-button {
    margin-top: 10px;
  }
}

.update-value {
  .button-group {
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
